<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Git版本控制完全指南</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .content-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }
        
        .content-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }
        
        .section-title {
            position: relative;
            padding-left: 20px;
        }
        
        .section-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 24px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 2px;
        }
        
        .code-block {
            background: #2d3748;
            color: #e2e8f0;
            padding: 16px 20px;
            border-radius: 8px;
            font-family: 'Consolas', 'Monaco', monospace;
            position: relative;
            overflow-x: auto;
        }
        
        .code-block::before {
            content: 'Git命令';
            position: absolute;
            top: -10px;
            left: 20px;
            background: #667eea;
            color: white;
            padding: 2px 12px;
            border-radius: 4px;
            font-size: 12px;
        }
        
        .feature-icon {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            margin-bottom: 16px;
        }
        
        .timeline-item {
            position: relative;
            padding-left: 40px;
            margin-bottom: 32px;
        }
        
        .timeline-item::before {
            content: '';
            position: absolute;
            left: 8px;
            top: 8px;
            width: 16px;
            height: 16px;
            background: #667eea;
            border-radius: 50%;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
        }
        
        .timeline-item::after {
            content: '';
            position: absolute;
            left: 15px;
            top: 24px;
            width: 2px;
            height: calc(100% + 16px);
            background: #e2e8f0;
        }
        
        .timeline-item:last-child::after {
            display: none;
        }
        
        .highlight-text {
            background: linear-gradient(120deg, #ffd89b 0%, #19547b 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 600;
        }
        
        .mermaid {
            display: flex;
            justify-content: center;
            margin: 32px 0;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .animate-fade-in {
            animation: fadeInUp 0.6s ease-out;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <div class="hero-gradient text-white py-20 px-6">
        <div class="max-w-6xl mx-auto text-center animate-fade-in">
            <h1 class="text-5xl md:text-6xl font-bold mb-6">
                <i class="fab fa-git-alt mr-4"></i>Git版本控制完全指南
            </h1>
            <p class="text-xl md:text-2xl opacity-90 max-w-3xl mx-auto leading-relaxed">
                掌握现代软件开发的核心技能，从基础到高级，全面了解Git版本控制系统的强大功能
            </p>
            <div class="mt-10 flex justify-center space-x-8">
                <div class="text-center">
                    <div class="text-3xl font-bold">6+</div>
                    <div class="text-sm opacity-80">核心章节</div>
                </div>
                <div class="text-center">
                    <div class="text-3xl font-bold">20+</div>
                    <div class="text-sm opacity-80">实用命令</div>
                </div>
                <div class="text-center">
                    <div class="text-3xl font-bold">∞</div>
                    <div class="text-sm opacity-80">应用场景</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="max-w-6xl mx-auto px-6 py-12">
        <!-- Introduction -->
        <div class="content-card rounded-2xl shadow-xl p-8 mb-8 animate-fade-in">
            <p class="text-lg leading-relaxed text-gray-700 indent-8">
                在现代软件开发过程中，版本控制系统（VCS）已成为不可或缺的工具。它不仅帮助开发者追踪和管理代码的历史变更，还能在团队协作中提供更高效的工作方式。Git作为最流行的版本控制系统之一，通过其强大的功能，成为全球开发者的首选工具。
            </p>
        </div>

        <!-- Git Workflow Visualization -->
        <div class="content-card rounded-2xl shadow-xl p-8 mb-8">
            <h3 class="text-2xl font-bold mb-6 text-gray-800">Git工作流程图</h3>
            <div class="mermaid">
                graph LR
                    A[工作区] -->|git add| B[暂存区]
                    B -->|git commit| C[本地仓库]
                    C -->|git push| D[远程仓库]
                    D -->|git pull| A
                    C -->|git checkout| E[分支切换]
                    E -->|git merge| C
                    style A fill:#ffd89b,stroke:#333,stroke-width:2px
                    style B fill:#19547b,stroke:#333,stroke-width:2px,color:#fff
                    style C fill:#667eea,stroke:#333,stroke-width:2px,color:#fff
                    style D fill:#764ba2,stroke:#333,stroke-width:2px,color:#fff
            </div>
        </div>

        <!-- Section 1: 版本控制概述 -->
        <div class="content-card rounded-2xl shadow-xl p-8 mb-8">
            <h2 class="section-title text-3xl font-bold mb-8 text-gray-800">
                <i class="fas fa-code-branch mr-3 text-purple-600"></i>1. 版本控制概述
            </h2>
            
            <p class="text-lg leading-relaxed text-gray-700 mb-8 indent-8">
                版本控制系统（VCS）是一种记录计算机文件内容变化的系统，使得开发者可以追溯文件的历史版本并进行相应的管理。通过使用VCS，开发者可以轻松查看、恢复、合并和管理不同版本的代码，同时避免因为多人协作而产生的代码冲突。
            </p>

            <h3 class="text-2xl font-semibold mb-6 text-gray-800">1.1 版本控制的类型</h3>
            
            <div class="grid md:grid-cols-3 gap-6 mb-8">
                <div class="bg-gradient-to-br from-purple-50 to-pink-50 p-6 rounded-xl">
                    <div class="feature-icon">
                        <i class="fas fa-desktop"></i>
                    </div>
                    <h4 class="text-xl font-semibold mb-3 text-gray-800">本地版本控制系统</h4>
                    <p class="text-gray-600">最简单的版本控制形式，开发者可以将文件的历史记录保存在本地机器上。典型例子是RCS，它可以保存文件的多个版本，但无法处理复杂的多人协作。</p>
                </div>
                
                <div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-xl">
                    <div class="feature-icon">
                        <i class="fas fa-server"></i>
                    </div>
                    <h4 class="text-xl font-semibold mb-3 text-gray-800">集中式版本控制系统</h4>
                    <p class="text-gray-600">如CVS、Subversion，使用中央服务器存储所有版本代码。虽然管理简单，但网络问题会影响工作效率。</p>
                </div>
                
                <div class="bg-gradient-to-br from-green-50 to-teal-50 p-6 rounded-xl">
                    <div class="feature-icon">
                        <i class="fas fa-network-wired"></i>
                    </div>
                    <h4 class="text-xl font-semibold mb-3 text-gray-800">分布式版本控制系统</h4>
                    <p class="text-gray-600">如Git、Mercurial，每个开发者拥有完整代码副本。具有高效、灵活的版本管理能力，特别适合大规模团队协作。</p>
                </div>
            </div>

            <h3 class="text-2xl font-semibold mb-6 text-gray-800">1.2 版本控制的好处</h3>
            
            <div class="space-y-4">
                <div class="flex items-start">
                    <i class="fas fa-history text-purple-600 mt-1 mr-4 text-xl"></i>
                    <div>
                        <h4 class="font-semibold text-gray-800">版本管理</h4>
                        <p class="text-gray-600">所有修改都可以被记录，开发者可以随时回溯和查看历史版本，避免丢失代码或数据。</p>
                    </div>
                </div>
                
                <div class="flex items-start">
                    <i class="fas fa-users text-purple-600 mt-1 mr-4 text-xl"></i>
                    <div>
                        <h4 class="font-semibold text-gray-800">协作</h4>
                        <p class="text-gray-600">多个开发者可以并行开发，Git允许多人对同一个项目进行协作，处理并发修改。</p>
                    </div>
                </div>
                
                <div class="flex items-start">
                    <i class="fas fa-shield-alt text-purple-600 mt-1 mr-4 text-xl"></i>
                    <div>
                        <h4 class="font-semibold text-gray-800">代码备份与恢复</h4>
                        <p class="text-gray-600">如果代码出现问题，可以很容易地回到之前的版本进行恢复。</p>
                    </div>
                </div>
                
                <div class="flex items-start">
                    <i class="fas fa-search text-purple-600 mt-1 mr-4 text-xl"></i>
                    <div>
                        <h4 class="font-semibold text-gray-800">变更跟踪</h4>
                        <p class="text-gray-600">Git可以清晰地记录每次修改的具体内容，帮助开发者理解代码变更的原因。</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Section 2: Git基础知识 -->
        <div class="content-card rounded-2xl shadow-xl p-8 mb-8">
            <h2 class="section-title text-3xl font-bold mb-8 text-gray-800">
                <i class="fas fa-terminal mr-3 text-purple-600"></i>2. Git基础知识
            </h2>
            
            <p class="text-lg leading-relaxed text-gray-700 mb-8 indent-8">
                Git是一款分布式版本控制系统，它通过管理代码的快照（commit）来帮助开发者管理代码历史。理解Git的基本操作是每位开发者的必备技能。
            </p>

            <h3 class="text-2xl font-semibold mb-6 text-gray-800">2.1 Git常用命令</h3>
            
            <div class="space-y-4 mb-8">
                <div class="code-block">
                    <div class="mb-2"><span class="text-green-400">$</span> git init <span class="text-gray-400"># 初始化一个新的Git仓库</span></div>
                    <div class="mb-